<script lang="ts" setup>
import { inject } from 'vue';
import SonSonCom from './SonSonCom.vue';

  interface dogs {
    name: string
    age: number
  }
// 子组件通过 defineProps 接收父组件传递的参数
  defineProps<dogs>()

// 定义子组件的回调函数
  // const emits = defineEmits<{
  //  // 参数1: 回调函数名称
  //  // 参数n: 回传数据的类型
  //   (e:'my-event',age:number):void
  // }>()

  // Vue 3.3+ 新增另一种更简洁的语法
  const emits = defineEmits<{
    // key: 回调函数名称
    // value: 回调函数参数类型
    'my-event':[age:number]
    'my-name':[name:string]
  }>()

  const totalCount = inject<number>('totalCount')

</script>

<template>
  <div class="son">
    <h2 class="text">我是子组件</h2>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <p>provide提供的{{ totalCount }}</p>
    <button @click="emits('my-event',age)">子组件触发回调函数</button>
    <button @click="emits('my-name',name)">获取名字</button>
    <SonSonCom />
  </div>
  
</template>

<style scoped>
.son {
  border: 1px solid blueviolet;
}
.text {
  color: plum;
}
</style>